<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script src="/echarts/jquery-1.11.1.min.js"></script>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
  <script th:src="@{/layui/layui.js}"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body class="childrenBody">

<div id= "addDiv" style="display: none;padding: 10px;padding-right: 5%">
  <form action="" method="post" id="searchFrm2" lay-filter="searchFrm2" class="layui-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">省份名称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" id = "chinaname" lay-verify="required" class="layui-input input-radius" placeholder="请输入省份名称">
          <input type="hidden" name="id">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">确诊数量</label>
        <div class="layui-input-inline">
          <input type="text" name="value" id = "chinavalue" lay-verify="required" class="layui-input input-radius" placeholder="请输入确诊数量">
        </div>
      </div>
      <div class="layui-inline" style="padding-left: 10%">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doAdd"><i
                class="layui-icon layui-icon-search layui-icon-normal"></i>新增
        </button>
        <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                class="layui-icon layui-icon-refresh"></i><span>重置</span>
        </button>
      </div>
    </div>
  </form>
</div>


<div id= "UpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
  <form action="" method="post" id="searchFrm3" lay-filter="searchFrm3" class="layui-form">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">省份名称</label>
        <div class="layui-input-inline">
          <input type="text" name="name" id = "chinaname1" lay-verify="required" class="layui-input input-radius" placeholder="请输入省份名称">
          <input type="hidden" name="id">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">确诊数量</label>
        <div class="layui-input-inline">
          <input type="text" name="value" id = "chinavalue1" lay-verify="required" class="layui-input input-radius" placeholder="请输入确诊数量">
        </div>
      </div>
      <div class="layui-inline" style="padding-left: 10%">
        <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doUpdate"><i
                class="layui-icon layui-icon-search layui-icon-normal"></i>修改
        </button>
        <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                class="layui-icon layui-icon-refresh"></i><span>重置</span>
        </button>
      </div>
    </div>
  </form>
</div>





<div >
  <!-- 内容主体区域 -->
  <div style="padding: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px">
      <legend>搜索条件</legend>
    </fieldset>
    <form action="" method="post" id="searchForm" lay-filter="searchForm" class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">省份</label>
          <div class="layui-input-inline">
            <input type="text" name="name"  class="layui-input input-radius"
              placeholder="请输入省份">
          </div>
        </div>
        <div class="layui-inline" >
          <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch">
            <i class="layui-icon layui-icon-search layui-icon-normal"></i>查询
          </button>
          <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm">
            <i class="layui-icon layui-icon-refresh"></i><span>重置</span>
          </button>
          <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doOutPortExcel">
            <i class="layui-icon layui-icon-download-circle layui-icon-normal"></i>导出Excel疫情数据
          </button>
        </div>
      </div>
    </form>

    <div class="layui-upload-drag" id="test10">
      <i class="layui-icon"></i>
      <p>点击上传，或将文件拖拽到此处</p>
      <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
      </div>
    </div>

    <table class="layui-hide" id="demo" lay-filter="test"></table>
  </div>
</div>

<script type="text/html" id="barDemo">
<button type="button" lay-event="update" class="layui-btn layui-btn-sm " >编辑</button>
<button type="button" lay-event="delete" class="layui-btn layui-btn-danger layui-btn-sm ">删除</button>
</script>


<script>
  layui.config({
    version: '1632428048355' //为了更新 js 缓存，可忽略
  });

  var tableIns;
  var minTable;

  //加载模块
  layui.use(['upload','jquery'],function(){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
                        //得到各种内置组件
    var layer = layui.layer //弹层
            ,$ = layui.jquery
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate //日期
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,dropdown = layui.dropdown //下拉菜单
            ,form = layui.form

    //向世界问个好
    layer.msg('Hello World');

    //监听Tab切换
    element.on('tab(demo)', function(data){
      layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
        tips: 1
      });
    });

    //执行一个 table 实例
    tableIns = table.render({
      elem: '#demo'
      ,height: 600
      ,url: '/chinaMapManage/PageList' //数据接口
      ,title: '用户表'
      ,page: true //开启分页
      ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      // ,totalRow: true //开启合计行
      ,cols: [ [ //表头
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'name', title: '省份', width:200}
        ,{field: 'value', title: '确诊人数', width:200, sort: true}
        ,{fixed: 'right', width: 150, align:'center', toolbar: '#barDemo'}
      ] ]
    });


    //上传
    upload.render({
      elem: '#test10'
      ,url: '/chinaMapManage/fileImport' //此处配置你自己的上传接口即可
      ,accept: 'file' //普通文件
      ,done: function(res){
        layer.msg('上传成功');
        console.log(res);
      }
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
              ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          openAddlayer()
          // layer.msg('添加');
          break;
        case 'update':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else if(data.length > 1){
            layer.msg('只能同时编辑一个');
          } else {
            layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
            // openUpdatelayer(checkStatus.data)
          }
          break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.confirm('真的删除行么', function(index){
              // obj.del(); //删除对应行（tr）的DOM结构
              $.post("/chinaMapManage/deleteById",{id:checkStatus.data[0].id},function (res){
                if (res.code==200){
                  tableIns.reload({
                    where:"",
                  });
                  layer.msg(res.msg)
                }
              })
              layer.close(index);
              //向服务端发送删除指令
            });
            // layer.msg('删除');
          }
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data //获得当前行数据
              ,layEvent = obj.event; //获得 lay-event 对应的值
      if(layEvent === 'update'){
        openUpdatelayer(data);
      } else if(layEvent === 'delete'){
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构
          $.post("/chinaMapManage/deleteById",{id:obj.data.id},function (res){
            if (res.code==200){
              tableIns.reload({
                where:"",
              });
              layer.msg(res.msg)
            }
          })
          layer.close(index);
          //向服务端发送删除指令
        });
    }
    });

    form.on("submit(doSearch)",function (data){
      tableIns.reload({
        where:data.field,
        page:{
          curr:1
        }
      });
      return false;
    })

    form.on("submit(doAdd)",function (data){
      $.ajax({
        method:'post',
        dataType:'json',
        contentType:'application/json',
        url:'/chinaMapManage/save',
        data:JSON.stringify(data.field),
        success:function (res){
          if (res.code == 200){
            tableIns.reload();
          }
          layer.msg(res.msg);
          layer.close(minTable);
        }
      })
    })

    form.on("submit(doUpdate)",function (data){
      $.post("/chinaMapManage/Update",data.field,function (res){
        if (res.code == 200){
          tableIns.reload();
        }
        layer.msg(res.msg);
        layer.close(minTable);
      })
    })


    function openAddlayer(){
      minTable = layer.open({
        type: 1,
        skin: 'layui-layer-rim',
        content: $("#addDiv")
      });
    }


    function openUpdatelayer(data){
      minTable = layer.open({
        type: 1,
        skin: 'layui-layer-rim',
        content: $("#UpdateDiv"),
        success:function () {
          $("#searchFrm3")[0].reset();
          form.val("searchFrm3",data);
        }
      });
    }

    form.on("submit(doOutPortExcel)",function (data){
      window.location.href = "/chinaMapManage/excelOutPortChina"
    })

    //分页
    laypage.render({
      elem: 'pageDemo' //分页容器的id
      ,count: 1000 //数据总数
      ,limit: 10 //每页显示的数据条数
      ,skin: '#1E9FFF' //自定义选中色值
      //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
      ,jump: function(obj, first){
        if(!first){
          layer.msg('第'+ obj.curr +'页', {offset: 'b'});
        }
      }
    });
  });
</script>
</body>
</html>
